<template>
	<div class="login">
		<div class="login-weaper">
			<div class="login-left">
				<div class="login-time">{{ time.txt }}</div>
				<div class="login-left-box">
					<div>
						<div class="logo">{{ getThemeConfig.globalViceTitle }}</div>
						<h2 class="title">{{ getThemeConfig.globalViceDes }}</h2>
						<div class="msg">
							<div class="msg-author">
								<span>{{ quotations.name }}</span>
								<span>{{ quotations.comeFrom }}</span>
							</div>
							<div class="msg-txt">{{ quotations.content }}</div>
						</div>
					</div>
				</div>
			</div>
			<div class="login-right">
				<div class="login-main">
					<h4 class="login-title">{{ getThemeConfig.globalTitle }}</h4>
					<a-form-model ref="ruleForm" :rules="rules" :model="ruleForm" class="login-form">
						<a-form-model-item style="margin-left: 0px" prop="userName">
							<a-input type="text" placeholder="请输入" v-model="ruleForm.userName" clearable>
								<a-icon slot="prefix" type="user" />
							</a-input>
						</a-form-model-item>
						<a-form-model-item style="margin-left: 0px" prop="password">
							<a-input-password type="password" placeholder="请输入密码" v-model="ruleForm.password" :show-password="true">
								<a-icon slot="prefix" type="lock" />
							</a-input-password>
						</a-form-model-item>
						<a-form-model-item class="a-form-item" style="margin: 40px 0px 0">
							<a-button type="primary" class="login-submit" @click="submitForm" :loading="submit.loading">
								<span>登 录</span>
							</a-button>
						</a-form-model-item>
						<!-- <a-form-model-item class="a-form-item" style="margin: 40px 0px 0">
							<a-button type="primary" class="login-submit" @click.native.prevent="handleLogin">
								<span>登 录</span>
							</a-button>
						</a-form-model-item> -->
					</a-form-model>
					<div class="login-menu">
						<a href="javascript:;">第三方登录</a>
						<a href="javascript:;">友情链接</a>
					</div>
				</div>
			</div>
		</div>
		<div class="vue-particles">
			<vue-particles color="#dedede" shapeType="star" linesColor="#dedede" hoverMode="grab" clickMode="push" style="height: 100%"></vue-particles>
		</div>
		<!-- <Verify
			ref="verify"
			:mode="'pop'"
			:captcha-type="'blockPuzzle'"
			:img-size="{ width: '400px', height: '200px' }"
			@success="capctchaCheckSuccess"
		/> -->
	</div>
</template>

<script>
import { Session } from '@/utils/storage';
import { formatDate, formatAxis } from '@/utils/formatTime';
import { PrevLoading } from '@/utils/loading.js';
// import Verify from '@/components/verifition/Verify';
// import { signIn } from '@/api/login';

export default {
	name: 'login',
	components: {
		// Verify,
	},
	data() {
		return {
			quotations: {},
			isView: false,
			submit: {
				loading: false,
			},
			ruleForm: {
				userName: 'admin',
				password: '123456',
				code: '1234',
			},
			time: {
				txt: '',
				fun: null,
			},
			rules: {
				userName: [{ required: true, trigger: 'blur', message: '用户名必须输入' }],
				password: [{ required: true, trigger: 'blur', message: '密码必须输入' }],
			},
		};
	},
	computed: {
		// 获取当前时间
		currentTime() {
			return formatAxis(new Date());
		},
		// 获取布局配置信息
		getThemeConfig() {
			return this.$store.state.themeConfig.themeConfig;
		},
	},
	created() {
		this.initTime();
	},
	mounted() {},
	// methods: {
	// 	// 初始化左上角时间显示
	// 	initTime() {
	// 		this.time.txt = formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS WWW QQQQ');
	// 		this.time.fun = setInterval(() => {
	// 			this.time.txt = formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS WWW QQQQ');
	// 		}, 1000);
	// 	},
	// 	// 登录按钮点击
	// 	submitForm() {
	// 		this.$refs.ruleForm.validate((valid) => {
	// 			if (valid) {
	// 				// if (!this.ruleForm.code) {
	// 				// 	this.$refs.verify.show();
	// 				// 	return;
	// 				// }
	// 				// this.capctchaCheckSuccess();
	// 				this.submit.loading = true;
	// 				alert('登录成功');
	// 				setTimeout(() => {
	// 					let defaultRoles = [];
	// 					let defaultAuthBtnList = [];
	// 					// admin 页面权限标识，对应路由 meta.roles
	// 					let adminRoles = ['admin'];
	// 					// admin 按钮权限标识
	// 					let adminAuthBtnList = ['btn.add', 'btn.del', 'btn.edit', 'btn.link'];
	// 					// common 页面权限标识，对应路由 meta.roles
	// 					let testAuthPageList = ['common'];
	// 					// test 按钮权限标识
	// 					let testAuthBtnList = ['btn.add', 'btn.link'];
	// 					if (this.ruleForm.userName === 'admin') {
	// 						defaultRoles = adminRoles;
	// 						defaultAuthBtnList = adminAuthBtnList;
	// 					} else {
	// 						defaultRoles = testAuthPageList;
	// 						defaultAuthBtnList = testAuthBtnList;
	// 					}
	// 					const userInfos = {
	// 						userName: this.ruleForm.userName === 'admin' ? 'admin' : 'test',
	// 						photo:
	// 							this.ruleForm.userName === 'admin'
	// 								? 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1813762643,1914315241&fm=26&gp=0.jpg'
	// 								: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=317673774,2961727727&fm=26&gp=0.jpg',
	// 						time: new Date().getTime(),
	// 						roles: defaultRoles,
	// 						authBtnList: defaultAuthBtnList,
	// 					};
	// 					// 存储 token 到浏览器缓存
	// 					Session.set('token', Math.random().toString(36).substr(0));
	// 					// 存储用户信息到浏览器缓存
	// 					Session.set('userInfo', userInfos);
	// 					// 存储用户信息到vuex
	// 					this.$store.dispatch('/sso/doLogin', userInfos);
	// 					PrevLoading.start();

	// 					window.location.href = `${window.location.origin}${window.location.pathname}`;
	// 					setTimeout(() => {
	// 						this.$message.success(`${this.currentTime}，欢迎回来！`);
	// 					}, 300);
	// 				}, 300);
	// 			}
	// 		});
	// 		/*	this.submit.loading = true;
	// 		setTimeout(() => {
	// 			let defaultRoles = [];
	// 			let defaultAuthBtnList = [];
	// 			// admin 页面权限标识，对应路由 meta.roles
	// 			let adminRoles = ['admin'];
	// 			// admin 按钮权限标识
	// 			let adminAuthBtnList = ['btn.add', 'btn.del', 'btn.edit', 'btn.link'];
	// 			// common 页面权限标识，对应路由 meta.roles
	// 			let testAuthPageList = ['common'];
	// 			// test 按钮权限标识
	// 			let testAuthBtnList = ['btn.add', 'btn.link'];
	// 			if (this.ruleForm.userName === 'admin') {
	// 				defaultRoles = adminRoles;
	// 				defaultAuthBtnList = adminAuthBtnList;
	// 			} else {
	// 				defaultRoles = testAuthPageList;
	// 				defaultAuthBtnList = testAuthBtnList;
	// 			}
	// 			const userInfos = {
	// 				userName: this.ruleForm.userName === 'admin' ? 'admin' : 'test',
	// 				photo:
	// 					this.ruleForm.userName === 'admin'
	// 						? 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1813762643,1914315241&fm=26&gp=0.jpg'
	// 						: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=317673774,2961727727&fm=26&gp=0.jpg',
	// 				time: new Date().getTime(),
	// 				roles: defaultRoles,
	// 				authBtnList: defaultAuthBtnList,
	// 			};
	// 			// 存储 token 到浏览器缓存
	// 			Session.set('token', Math.random().toString(36).substr(0));
	// 			// 存储用户信息到浏览器缓存
	// 			Session.set('userInfo', userInfos);
	// 			// 存储用户信息到vuex
	// 			this.$store.dispatch('/sso/doLogin', userInfos);
	// 			PrevLoading.start();

	// 			window.location.href = `${window.location.origin}${window.location.pathname}`;
	// 			setTimeout(() => {
	// 				this.$message.success(`${this.currentTime}，欢迎回来！`);
	// 			}, 300);
	// 		}, 300);*/
	// 	},
	// 	capctchaCheckSuccess(params) {
	// 		// this.ruleForm.code = params.captchaVerification;
	// 		console.log(signIn);
	// 		this.$refs.ruleForm.validate((valid) => {
	// 			signIn(this.ruleForm).then((res) => {
	// 				console.log(res);
	// 				if (res.code == 200) {
	// 					this.$message.success(res.msg);
	// 				} else {
	// 					this.$message.error(res.msg);
	// 				}
	// 			});
	// 		});
	// 	},
	// },
	methods: {
		// 初始化左上角时间显示
		initTime() {
			this.time.txt = formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS WWW QQQQ');
			this.time.fun = setInterval(() => {
				this.time.txt = formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS WWW QQQQ');
			}, 1000);
		},
		// 登录按钮点击
		submitForm() {
			this.submit.loading = true;
			setTimeout(() => {
				let defaultRoles = [];
				let defaultAuthBtnList = [];
				// admin 页面权限标识，对应路由 meta.roles
				let adminRoles = ['admin'];
				// admin 按钮权限标识
				let adminAuthBtnList = ['btn.add', 'btn.del', 'btn.edit', 'btn.link'];
				// common 页面权限标识，对应路由 meta.roles
				let testAuthPageList = ['common'];
				// test 按钮权限标识
				let testAuthBtnList = ['btn.add', 'btn.link'];
				if (this.ruleForm.userName === 'admin') {
					defaultRoles = adminRoles;
					defaultAuthBtnList = adminAuthBtnList;
				} else {
					defaultRoles = testAuthPageList;
					defaultAuthBtnList = testAuthBtnList;
				}
				const userInfos = {
					userName: this.ruleForm.userName === 'admin' ? 'admin' : 'test',
					photo:
						this.ruleForm.userName === 'admin'
							? 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1813762643,1914315241&fm=26&gp=0.jpg'
							: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=317673774,2961727727&fm=26&gp=0.jpg',
					time: new Date().getTime(),
					roles: defaultRoles,
					authBtnList: defaultAuthBtnList,
				};
				// 存储 token 到浏览器缓存
				Session.set('token', Math.random().toString(36).substr(0));
				// 存储用户信息到浏览器缓存
				Session.set('userInfo', userInfos);
				// 存储用户信息到vuex
				this.$store.dispatch('userInfos/setUserInfos', userInfos);
				PrevLoading.start();

				window.location.href = `${window.location.origin}${window.location.pathname}`;
				setTimeout(() => {
					this.$message.success(`${this.currentTime}，欢迎回来！`);
				}, 300);
			}, 300);
		},
	},
	destroyed() {
		clearInterval(this.time.fun);
	},
};
</script>

<style scoped lang="scss">
.login {
	height: 100%;
	width: 100%;
	overflow: hidden;
	display: flex;
	position: relative;

	.vue-particles {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: radial-gradient(ellipse at top left, rgba(105, 155, 200, 1) 0%, rgba(181, 197, 216, 1) 57%);
	}

	.login-weaper {
		margin: auto;
		height: 500px;
		display: flex;
		box-sizing: border-box;
		position: relative;
		z-index: 1;
		border: none;
		box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);

		.login-left {
			width: 491px;
			padding: 20px;
			font-size: 16px;
			color: #fff;
			position: relative;
			background-color: rgba(64, 158, 255, 0.8);
			display: flex;
			flex-direction: column;
			border-top-left-radius: 4px;
			border-bottom-left-radius: 4px;

			.login-time {
				width: 100%;
				color: #fff;
				opacity: 0.9;
				font-size: 14px;
				overflow: hidden;
			}

			.login-left-box {
				flex: 1;
				overflow: hidden;
				position: relative;
				z-index: 1;
				display: flex;
				align-items: center;
				padding: 80px 45px;

				.logo {
					font-size: 22px;
					margin-bottom: 15px;
				}

				.title {
					color: #fff;
					font-weight: 300;
					letter-spacing: 2px;
					font-size: 16px;
				}

				.msg {
					color: #fff;
					font-size: 13px;
					margin-top: 35px;

					.msg-author {
						opacity: 0.6;

						span:last-of-type {
							margin-left: 15px;
						}
					}

					.msg-txt {
						margin-top: 15px;
						line-height: 22px;
					}
				}
			}
		}

		.login-right {
			width: 491px;
			padding: 20px;
			position: relative;
			align-items: center;
			display: flex;
			background-color: rgba(255, 255, 255, 1);
			border-top-right-radius: 4px;
			border-bottom-right-radius: 4px;

			.login-main {
				margin: 0 auto;
				width: 70%;

				.login-title {
					color: #333;
					margin-bottom: 40px;
					font-weight: 500;
					font-size: 22px;
					text-align: center;
					letter-spacing: 4px;
				}

				.login-form {
					margin: 10px 0;

					i {
						color: #333;
					}

					.a-form-item {
						margin-bottom: 20px !important;

						.login-code {
							display: flex;
							align-items: center;
							justify-content: space-around;
							margin: 0 0 0 10px;
							user-select: none;

							.login-code-img {
								margin-top: 2px;
								width: 100px;
								height: 38px;
								border: 1px solid #dcdfe6;
								color: #333;
								font-size: 14px;
								font-weight: 700;
								letter-spacing: 5px;
								line-height: 38px;
								text-indent: 5px;
								text-align: center;
								cursor: pointer;
								transition: all ease 0.2s;
								border-radius: 4px;

								&:hover {
									border-color: #c0c4cc;
									transition: all ease 0.2s;
								}
							}
						}

						.login-submit {
							width: 100%;
							height: 45px;
							letter-spacing: 2px;
							font-weight: 300;
						}
					}
				}

				.login-menu {
					margin-top: 30px;
					width: 100%;
					text-align: left;

					a {
						color: #999;
						font-size: 12px;
						margin: 0 8px;
						text-decoration: none;

						&:hover {
							color: #1e9fff;
							text-decoration: underline;
						}
					}
				}
			}
		}
	}
}
</style>
